<template>
	<view class="container">
		<u-navbar placeholder title="确认订单" :autoBack="true"></u-navbar>

		<view class="goods-info pad-24">
			<view class="pad-24 bg-white radius16 mar-bottom-24 centerY" @click="hanldeAddressList">
				<view class="flex-w">
					<view class="color-black">{{addres.name}} {{addres.tel}}</view>
					<view class="font-28 mar-top-30">
						{{addres.province}}{{addres.city}}{{addres.region}}{{addres.detail}}
					</view>
				</view>
				<u-icon size="14" name="arrow-right"></u-icon>
			</view>

			<view class="image-box bg-white pad-16 centerY radius24">
				<image class="goods-cover radius16 shrink" :src="data.cover">
				</image>
				<view class="mar-left-32 multi2">{{data.name}}</view>
			</view>

			<view class="pad-top-bottom-24 bg-white mar-top-24 radius24">
				<!-- <view class="cell betweenX pad-24 font-28">
					<view class="color-grey">创作者</view>
					<view>火狐数藏</view>
				</view> -->
				<!-- <view class="cell betweenX pad-24 font-28">
					<view class="color-grey">区块链地址</view>
					<view class="centerY">
						<text>952472****9D989130C7</text>
						<image class="copy" src="../../static/icon/copy-dark.png"></image>
					</view>
				</view> -->
				<view class="cell betweenX pad-24 font-28">
					<view class="color-grey">订单金额</view>
					<view>￥{{price}}</view>
				</view>
			</view>

			<view class="pad-top-bottom-24 bg-white mar-top-24 radius24">
				<view class="cell betweenX pad-24 font-28" v-for="(item,index) in payList" :key="index">
					<view class="color-grey">{{item.name}}</view>
					<view class="icon-box" @click="hanldeTypePay(index)">
						<u-icon v-if="pay == index" size="16" color="#df0007" name="checkbox-mark"></u-icon>
					</view>
				</view>
			</view>

		</view>
		<view class="button-box pad-left-right-32 pad-top-bottom-10 bg-white centerY">
			<view class="button-price"><text class="font-24">￥</text><text class="font-44">{{price}}</text></view>
			<view class="button flex-w" @click="$u.debounce(hanldePay,500)">立即购买</view>
		</view>
	</view>
</template>

<script>
	// 接口地址
	import {
		productInfo,
		addProOrder,
		payPlat,
		openWallet,
		userWalletOPen,
		getDef,
		getAddRessInfo
	} from '@/config/api.js'
	export default {
		data() {
			return {
				// 详情数据
				goodsInfo: {},
				data: {},
				// 开通了几个支付
				isPay: 0,
				// 支付列表
				payList: [],
				// 默认支付方式
				pay: 0,
				// 支付方式
				pay_plat: 0,
				// 价格
				price: '',
				// 地址信息
				addres: {}
			}
		},
		onLoad(options) {
			this.infoId = options.id;
			this.specId = options.specId;
			this.getInfo();
			this.getPayPlat();
			this.getDefAddress();
		},

		methods: {
			// 获取地址详情
			backcardata(obj) {
				this.getAddresInfo(obj.id);
			},
			// 获取地址详情
			getAddresInfo(id) {
				getAddRessInfo({
					id: id
				}).then(res => {
					this.addres = res.data.info;
				})
			},
			// 跳转地址列表
			hanldeAddressList() {
				uni.navigateTo({
					url: '/pages/address/list?type=' + 'goods'
				})
			},
			// 获取默认地址
			getDefAddress() {
				getDef().then(res => {
					this.getAddresInfo(res.data.info.id)
				})
			},
			// 切换支付方式
			hanldeTypePay(inx) {
				this.pay = inx;
			},
			// 判断环境
			getEnvironment() {
				// #ifdef APP-PLUS
				return 'app'
				// #endif

				// #ifdef H5
				return 'wap'
				// #endif
			},
			// 点击支付
			hanldePay() {
				uni.showLoading({
					title: '支付中...'
				})
				// 创建订单
				addProOrder({
					spec_id: this.specId,
					addr_id: this.addres.id
				}).then(order => {
					uni.hideLoading();
				})
			},
			// 获取平台支付方式
			getPayPlat() {
				payPlat({
					scene: 'e_trade'
				}).then(pay => {
					let {
						lists
					} = pay.data;

					lists.map(item => {
						item.isShow = false;
					})

					this.payList = lists;
				})
			},
			// 获取详情
			getInfo() {
				productInfo({
					id: this.infoId
				}).then(res => {
					let {
						info,
						specs
					} = res.data;

					specs.forEach(item => {
						if (item.id == this.specId) {
							this.price = item.price;
						}
					})

					this.data = info;
					this.specs = specs;
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.container {
		min-height: 100vh;

		::v-deep .u-navbar__content {
			background-image: url('../../static/image/my-bg.png');
			background-size: cover;
			background-repeat: no-repeat;
			background-color: #f5f5f5;
		}

		.goods-info {
			.goods-cover {
				width: 160rpx;
				height: 160rpx;
			}
		}

		.copy {
			display: block;
			width: 28rpx;
			height: 28rpx;
		}

		.icon-box {
			width: 30rpx;
			flex-shrink: 0;
			height: 30rpx;
			border: 1rpx solid #c8c9cc;
			border-radius: 50%;
		}

		.button-box {
			position: fixed;
			width: 100%;
			bottom: 0;

			.button-price {
				margin-right: 100rpx;
			}

			.button {
				background: linear-gradient(270deg, #df0007, #df0007);
				color: #fff;
				text-align: center;
				height: 92rpx;
				line-height: 92rpx;
				border-radius: 46rpx;
			}

			.disabled {
				opacity: .5;
			}
		}

		.button-pay {
			background: linear-gradient(270deg, #df0007, #df0007);
			color: #fff;
			font-size: 24rpx;
			line-height: 44rpx;
			padding: 0 20rpx;
			border-radius: 20rpx;
		}
	}
</style>